<template>
  <div>
    <div class="blank init change" :style="{ height: height }">
      <div
        class="service"
        v-for="(item, index) in titleList"
        @click="toggle(index)"
      >
        <i :class="item.img"></i>
        <p>{{ item.title }}</p>
      </div>
    </div>
    <!-- 每一项 -->
    <!-- //" -->
    <conitem :imgList="imgList" :getData="getData" :key="'item_'+imgList.length" @getUrl="broadcast"></conitem>
    <!-- <router-view :key="$route.fullPath"></router-view> -->
  </div>
</template>
<script>
import conitem from "@/components/con1Item"
export default {
  data() {
    return {
      imgList: [],
      high: 0,
      // active:"rgb(13, 174, 185)",
      height: "81px",
      titleList: [
        {
          img: "iconfont icon-huabanfuben",
          title: "舒压",
        },
        {
          img: "iconfont icon-huatong1",
          title: "唱见",
        },
        {
          img: "iconfont icon-zhuye1",
          title: "附近",
        },
        {
          img: "iconfont icon-paixingbang",
          title: "荣耀榜",
        },
        {
          img: "iconfont icon-qita",
          title: "更多",
        },
        {
          img: "iconfont icon-xin",
          title: "我的关注",
        },
        {
          img: "iconfont icon-wode1",
          title: "我的",
        },
      ],
    };
  },
  components:{
    conitem
  },
  created() {},
  async mounted() {
    this.getData(20);
    // var res = await this.$api.getMv();
    // this.imgList = res.data;
    // 等待异步事件执行完毕
  },
  updated() {
    // 渲染页面也是异步事件，数组长度为0
  },
  methods: {
    showMv(id){
      console.log(id);
    },
    toggle(index) {
      if (index == 4) {
        if (this.height == "81px") {
          this.height = "182px";
        } else {
          this.height = "81px";
        }
      }
    },
    async getData(limit) {
      var res = await this.$api.getMv(limit);
      this.imgList = res.data;
    },
    broadcast(obj){
      var id=obj.id;
      var artistName=obj.artistName;
      var uname=obj.name;
      this.$router.push({name:"showMv",query:{id,artistName,uname}});
    }
  },
};
</script>
<style scoped lang="scss">
.blank {
  height: 200px;
  padding: 10px 0;
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap;
  box-sizing: border-box;
}
.blank .service {
  flex: 0 0 20%;
  flex-direction: column;
  text-align: center;
  margin-bottom: 10px;
}
.service i {
  display: inline-block;
  line-height: 50px;
  width: 50px;
  height: 50px;
  background: rgb(13, 174, 185);
  border-radius: 25px;
}
.service .iconfont {
  color: white;
  font-size: 20px;
}
.service p {
  margin-top: 5px;
  font-size: 12px;
  color: #ccc;
}
.init {
  height: 81px;
  overflow: hidden;
}
.change {
  transition: height 0.5s;
}
.active {
  background: rgb(250, 121, 121);
}

</style>
